// 放大镜这块
import $ from "jquery";
import Magnifier from "../../modules/magnifier/magnifier";
import ProfileMgr from "../../data/ProfileMgr";
class MidWine{
    constructor(data,selector,callback){
        this.init.apply(this, arguments);
    }
    init(data,selector,callback){
        this.m_data = data || [];
        this.m_rootEle = $(selector);
        this.m_count = 1;
        this.m_callback = callback;
        this.render();
        this.bindEvent();
    }
    bindEvent(){
        let that =  this;
        $(".info_wine .shopcart").on("click", ".jian",function(){
            that.removeGoods();
        });
        $(".info_wine .shopcart").on("click", ".jia",function(){
            that.addGoods();
        });
        $(".info_wine .shopcart").on("click", ".add",function(){
            that.addToShopCart();
        });
    }
    render(){
        this.renderLeft();
        this.renderMid();
        this.renderRight();
    } 
    // 渲染左边图片
    renderLeft(){
        let tiny_img = this.m_data.tiny_img;
        let small_img = this.m_data.small_img;
        let big_img = this.m_data.big_img;
        // 左边tab列表
        let html = `<div class="zoom-desc">
                <p>`;
        tiny_img.forEach(path=>{
            html += `<a href="javascript:void(0)" class="cloud-zoom-gallery">
                    <img class="zoom-tiny-image" src="${path}">
                </a>`
        });
        html += `</p>
                    </div>`;

        // 中间图片
        html += `<div class="zoom-small-image">
            <div id="wrap" style="top:0px;z-index:8888;position:relative;">
                <a href="javascript:void(0)" class="cloud-zoom" id="zoom1" style="position: relative; display: block;">
                    <img src="${small_img[0]}" width="288px;" height="288px;" style="display: block;">
                    <div class= "cloud-zoom-lens"></div>
                </a>
                <div class="cloud-zoom-big" id="cloud-zoom-big" style="display:none">
                    <img src="${big_img[0]}">
                </div>
            </div>
        </div>`;

        // 收藏
        html += `<div class="pic_da">
            <div class="collect_fenxiang">
                <a class="collect" href="javascript:void(0)">收藏</a>
            </div>		
        </div>`;
        this.m_rootEle.find(".lt_pic").html(html);
        new Magnifier({
            lbCls: "#zoom1",
            clipCls: ".cloud-zoom-lens",
            rbCls: "#cloud-zoom-big",
            lImgCls: "#zoom1 img",
            rImgCls: "#cloud-zoom-big img",
            tabCls: ".cloud-zoom-gallery",
            data: {
                smallImgs: tiny_img,
                midImgs: small_img,
                bigImgs: big_img
            }
        })
    }
    // 渲染中间描述
    renderMid(){
        let info = this.m_data;
        let html = `
        <div class="biaoti">
                <h1><b>${info.goods_name}</b></h1>
        </div>
        <div class="fubiao">${info.en_name}</div>
        <div class="ppjj">
                <div class="pingjia" title="${info.desc_name}">
                    <div class="photo_ren"></div>${info.desc_name}
                </div>
                <div class="both"></div>
        </div>
        <div class="kucun">库存状态：
                <span>
                    ${info.state}
                </span>
        </div>
        <div class="shopcart">
                <div class="jiage" style="height:auto;">
                    酒客价：<span class="cuxiao">￥${parseFloat(info.normal_price).toFixed(2)}</span>
                </div>
                <div class="num">
                    <span>数量：</span>
                    <a class="jian" href="javascript:void(0)">-</a>
                    <a class="date" id="shuliang">1</a>
                    <a class="jia" href="javascript:void(0)">+</a>
                    <div class="clear"></div>
                </div>
                <div class="shopping">
                    <div class="add">
                            <a href="javascript:void(0)"></a>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
        </div>
        `;
    this.m_rootEle.find(".info_wine").html(html);
    }
    // 渲染右边编号
    renderRight(){
        let html = `
        <div class="rt_jiang">
        	<div class="rongyu">
        		<div class="spmub">商品编号:${this.m_data.goods_id}</div>                               
                <div class="biaot">酒客荣誉</div>
	            <div class="star5" id="rongru"></div>
                <div class="tiao">
                </div>
            </div>
        </div>
        `;
        this.m_rootEle.find(".rt_jiang").html(html);
    }
    // 增加一件
    addGoods(){
        this.m_count ++;
        $("#shuliang").html(this.m_count);
    }
    // 减少一件
    removeGoods(){
        this.m_count --;
        if(this.m_count <= 1){
            this.m_count = 1;
        }
        $("#shuliang").html(this.m_count);
    }
    addToShopCart(){
        ProfileMgr.addCartListById(this.m_data.goods_id,this.m_count);
        // 同步购物车商品数量
        let totalCount = ProfileMgr.getCartCount();
        $(".cartgoodsnum").html(totalCount);

        // 右边购物车显示
        if(typeof this.m_callback == "function") this.m_callback();
    }
}

module.exports =  MidWine;